<template>
  <div class="tool-comparisons">
    <h2 class="bar-title mb-6 break-words"
      v-if="comparisons && comparisons !== null && comparisons.length > 0">
      <span class="text-gray-1000 text-26 font-semibold break-words w-full">{{$t('detail_comparisons', {toolName: toolName})}}</span>
    </h2>
    <div class="vs-list mt-6 grid gap-5 sm:grid-cols-3"
      v-if="comparisons && comparisons !== null && comparisons.length > 0">
      <common-link path="/compare/:handle"
        :params="{ handle:`${$route.params.handle}-vs-${item.handle}`}"
        v-for="(item, key) in comparisons"
        :key="`${item.handle}-${key}`"
        class="text-lg text-gray-1000 border-gray-2000 border rounded-md text-center px-5 py-4 truncate  hover:text-purple-1300 hover:underline go-comparisons-link">
        {{ toolName }} {{$t('detail_vs')}} {{ $websiteName(item) }}
      </common-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToolDetailComparisons',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    comparisons: {
      type: Array | null,
      default: null,
    },
    toolName: {
      type: String,
      default: '',
    },
  },
}
</script>